<!--首页-->
<template>
  <div class="index">
    <!--我的资源-->
    <div class="index-resources">
      <div class="index-header">
        <div class="index-title">我的资源</div>
        <div
          v-show="userInfo.companyType != 0 && userInfo.companyType != -1"
          class="index-home"
          style="cursor: pointer;"
          @click="goHome()"
        >进入公司主页</div>
      </div>
      <div class="index-resources-item">
        <div class="index-resources-list" v-show="userInfo.companyType != -1">
          <router-link to="/Home/Housing">
            <div class="index-resources-center">
              <div class="index-resources-list-title">{{myResource.publishHouse}}</div>
              <div class="index-resources-list-name">发布中房源{{myResource.weekPublishHouse}}</div>
              <div class="index-resources-list-pt">+{{weekPublishHouse}}</div>
            </div>
          </router-link>
        </div>
        <div class="index-resources-list">
          <router-link to="/Home/Brochure">
            <div class="index-resources-center">
              <div class="index-resources-list-title">{{myResource.myBuilding}}</div>
              <div class="index-resources-list-name">我的楼书</div>
            </div>
          </router-link>
        </div>
        <div class="index-resources-list">
          <router-link to="/Home/Follow">
            <div class="index-resources-center">
              <div class="index-resources-list-title">{{myResource.collectionHouse}}</div>
              <div class="index-resources-list-name">收藏房源</div>
            </div>
          </router-link>
        </div>
        <div class="index-resources-list">
          <router-link :to="{path:'/Home/Follow',query:{index:'index'}}">
            <div class="index-resources-center">
              <div class="index-resources-list-title">{{myResource.myAttention}}</div>
              <div class="index-resources-list-name">关注楼盘</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!--会员中心-->
    <div class="index-member" v-if="userInfo && userInfo.company!=null">
      <div class="index-title">会员中心</div>
      <div class="index-member-left">
        {{userInfo.company.companyName}}
        <span>{{userInfo.company.validateEnd == '9999-12-31' ? '无限期' : userInfo.company.validateEnd+'到期' }}</span>
      </div>
    </div>
    <!--广告列表-->
    <div class="index-advert" v-show="advertList.length>0">
      <el-carousel height="180px">
        <el-carousel-item v-for="item in advertList" :key="item.fileId">
          <a :href="item.linkUrl?'item.linkUrl':'#'">
            <img
              style="height:100%"
              :src="item.fileId? `${locationUrl}${item.fileId}`:imgDefault"
            >
          </a>
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="index-advert-left">

      </div>-->
    </div>
    <!--发布中的房源-->
    <div class="index-release" v-show="userInfo.companyType != -1">
      <div class="index-title">
        发布中的房源
        <router-link :to="{path:'/Home/Housing',query:{index:'index'}}">
          <el-button type="primary" size="mini">创建房源</el-button>
        </router-link>
      </div>
      <div class="index-center">
        <div
          class="index-list"
          v-for="item in pubBuiHouse"
          :key="item.houseId"
          @click="goDetail(item)"
        >
          <div class="index-list-img">
            <img
              :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:'.././static/images/noupload.png'"
            >
          </div>
          <div class="index-list-center">
            <div class="index-list-title">
              <span class="active">{{item.houseTitle}}</span>
            </div>
            <div style="clear:both"></div>
            <div class="index-list-item">
              <div class="index-list-money">
                <span>{{item.price}}</span> 元/m²·天
              </div>
              <div class="index-list-browse">浏览量 {{item.visitsNum}}</div>
            </div>
            <div class="index-list-item">
              <div class="index-list-upper">上架：{{item.publishTime}}</div>
              <!-- <div class="index-list-time">加入楼数量15</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--楼书浏览量-->
    <div class="index-brochure">
      <div class="index-title">
        楼书浏览量
        <router-link :to="{path:'/Home/Brochure',query:{index:'index'}}">
          <el-button type="primary" size="mini">创建楼书</el-button>
        </router-link>
      </div>
      <div class="index-brochure-cont">
        <div class="index-brochure-tab">
          <el-table
            :data="limitJsonData"
            style="width: 100%;"
            :header-cell-style="{color:'#98A9BC'}"
          >
            <el-table-column type="index" min-width="10%"></el-table-column>
            <el-table-column label="标题" align="center" prop="title" min-width="25%"></el-table-column>
            <el-table-column label="日期" align="center" prop="createTime" min-width="25%"></el-table-column>
            <el-table-column label="浏览次数" align="center" prop="visitsNum" min-width="10%"></el-table-column>
            <el-table-column label="最近修改日期" align="center" prop="updateTime" min-width="25%"></el-table-column>
            <el-table-column label="操作" align="center" min-width="20%">
              <template slot-scope="scope">
                <!-- <el-button size="mini">编辑</el-button> -->
                <el-button type="text" size="mini" @click="checkBrochure(scope.row)">查看</el-button>
                <el-button type="text" size="mini" @click="share(scope.row)">分享</el-button>
                <router-link :to="{path:'/Home/Brochure',query:{row:scope.row,index:'editor'}}">
                  <el-button type="text" size="mini">编辑</el-button>
                </router-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="brochureShare" :show-close="false">
      <div class="brochure-title">
        <span>分享楼书：</span>
        {{shareBrochure.title}}
      </div>
      <div class="brochure-content">
        <label>链接：</label>
        <input id="foo" type="text" v-model="jumpLink">
        <span
          type="text"
          style="margin-left:15px;"
          data-clipboard-target="#foo"
          @click="copy()"
          class="copy"
        >复制</span>
      </div>
      <div style="overflow:hidden;margin-top:100px;">
        <el-button style="float:right;" @click="brochureShare = false">返回</el-button>
      </div>
    </el-dialog>
    <!--我的足迹-->
    <div class="index-footprint">
      <div class="index-title">我的足迹</div>
      <div class="index-center">
        <div class="index-list" v-for="item in visitHous" :key="item.houseId" @click="goDetail(item)">
          <div class="index-list-img">
            <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
          </div>
          <div class="index-list-center">
            <div class="index-list-title">{{item.houseName}}</div>
            <div class="index-list-item">
              <div class="index-list-money">
                <span>{{item.price}}</span> 元/m²·天
              </div>
              <div class="index-list-browse">浏览量 {{item.visitsNum}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--向您推荐-->
    <div class="index-recommend">
      <div class="index-title">向您推荐</div>
      <div class="index-center">
        <div class="index-list" v-for="item in recommendHouseList" :key="item.houseId" @click="goDetail(item)">
          <div class="index-list-img">
            <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
          </div>
          <div class="index-list-center">
            <div class="index-list-title">{{item.houseName}}</div>
            <div class="index-list-item">
              <div class="index-list-money">
                <span>{{item.price}}</span> 元/m²·天
              </div>
              <div class="index-list-browse">浏览量 {{item.visitsNum}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import * as homeAPI from "@/api/home";
import * as publicAPI from "@/api/public";

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(to.path);
    });
  },
  name: "Index",
  data() {
    return {
      advForm: {
        cityId: 1,
        useScope: 1,
        userType: 3
      },
      jumpLink:'',
      userInfo: {}, //用户信息
      num: "4", //展示数量
      myResource: {}, //资源信息数量
      weekPublishHouse: 0, //每周发布数量
      pubBuiHouse: [], //最新发布房源
      limitJsonData: [], //楼书浏览量
      visitHous: [], //我的足迹
      advertList: [], //广告列表
      recommendHouseList: [], //推荐
      brochureShare: false, //楼书分享dialog
      shareBrochure: {}, //楼书分享
      countVisitNum: "" //跳转楼盘浏览量
    };
  },
  computed: {
    loclUrl() {
      let ip = window.location.host,
        url = "";
      if (ip.indexOf("127.0.0.1") >= 0 || ip.indexOf("localhost") >= 0) {
        url = "http://114.113.68.14:9000";
      } else if (ip.indexOf("www.") >= 0) {
        url = "http://image.3dzhixuan.com";
      } else {
        url = "http://" + ip;
      }
      return url;
    }
  },
  created() {
    if (localStorage.userInfo) {
      this.userInfo = JSON.parse(localStorage.userInfo);
    }
    this.getMyResource();
    this.getWeekPublishHouse();
    this.findUserPubBuiHouse();
    this.getAdvert();
    this.limitJson();
    this.findVisitHouse();
    this.recommendHouse();
  },
  methods: {
    //进去公司主页
    goHome() {
      if (this.userInfo.companyType == "0") {
        //智选房屋本公司
        window.location.href = "/home/html/";
      } else if (this.userInfo.companyType == "1") {
        //开发商
        this.getCountVisitNum(this.userInfo.company.buildingId);
        window.location.href =
          "/three/main.html?name=" +
          this.userInfo.company.building3dNo +
          "&cnt=" +
          this.countVisitNum +
          "&buildid=" +
          this.userInfo.company.buildingId;
      } else if (this.userInfo.companyType == "2") {
        //资产管理公司
        window.location.href =
          "/item/views/others/company.html?id=" +
          this.userInfo.company.companyId;
      } else if (this.userInfo.companyType == "3") {
        //中介经纪人
        window.location.href =
          "/item/views/others/agency.html?id=" + this.userInfo.userId;
      }
    },
    //获取开发商跳转楼盘浏览量
    getCountVisitNum(id) {
      publicAPI
        .countVisit({ type: "1", id: id })
        .then(res => {
          this.countVisitNum = res.data;
        })
        .catch(err => {
          this.countVisitNum = 0;
        });
    },
    // 获取资源数量
    getMyResource() {
      homeAPI
        .myResource()
        .then(response => {
          this.myResource = response.data;
        })
        .catch(err => {
          console.log("获取资源数量=====>", err);
        });
    },
    // 获取广告列表
    getAdvert() {
      this.advForm.userType = this.userInfo.companyType;
      homeAPI
        .accountFirstPage(this.advForm)
        .then(response => {
          this.advertList = response.data;
        })
        .catch(err => {
          console.log("获取广告列表=====>", err);
        });
    },
    // 最新发布
    findUserPubBuiHouse() {
      this.pubBuiHouse = [];
      homeAPI
        .findUserPubBuiHouse({ num: this.num })
        .then(response => {
          response.data.forEach((item, ind) => {
            publicAPI.countVisit({ type: 3, id: item.houseId }).then(data => {
              item.visitsNum = data.data;
              this.pubBuiHouse.push(item);
            });
          });
        })
        .catch(err => {
          console.log("最新发布=====>", err);
        });
    },
    // 本周发布
    getWeekPublishHouse() {
      homeAPI
        .weekPublishHouse({ num: this.num })
        .then(response => {
          this.weekPublishHouse = response.data;
        })
        .catch(err => {
          console.log("本周发布=====>", err);
        });
    },
    // 楼书浏览
    limitJson() {
      homeAPI
        .limitJson({ num: this.num })
        .then(response => {
          const arr = response.data;
          arr.forEach((item, ind) => {
            publicAPI.countVisit({ type: 7, id: item.id }).then(data => {
              item.visitsNum = data.data;
              this.limitJsonData.push(item);
            });
          });
        })
        .catch(err => {
          console.log("楼书浏览=====>", err);
        });
    },
    // 我的足迹
    findVisitHouse() {
      homeAPI
        .findVisitHouse({ num: this.num })
        .then(response => {
          const arr = response.data;
          arr.forEach((item, ind) => {
            publicAPI.countVisit({ type: 3, id: item.houseId }).then(data => {
              item.visitsNum = data.data;
              this.visitHous.push(item);
            });
          });
        })
        .catch(err => {
          console.log("我的足迹=====>", err);
        });
    },
    // 跳转至房源详情
    goDetail(item) {
      window.open(
        "/three/fxfyxq.html?name=" +
          item.building3dCode +
          "&cnt=0&houseid=" +
          item.houseId +
          "&buildid=" +
          item.buildingId +
          ""
      );
    },
    // 推荐房源
    recommendHouse() {
      publicAPI
        .recommendHouse()
        .then(response => {
          const arr = response.data;
          arr.forEach((item, ind) => {
            publicAPI.countVisit({ type: 3, id: item.houseId }).then(data => {
              item.visitsNum = data.data;
              this.recommendHouseList.push(item);
            });
          });
        })
        .catch(err => {
          console.log("推荐房源=====>", err);
        });
    },
    // 预览楼书房源
    checkBrochure(row) {
      this.$router.push({ path: "/Share", query: row });
    },
    share(row) {
      this.jumpLink = this.loclUrl+'/console/#/Share?id='+row.id;
      this.shareBrochure = row;
      this.brochureShare = true;
    },
    // 复制链接
    copy() {
      var clipboard = new Clipboard(".copy");
      clipboard.on("success", function(e) {
        this.$message.success("复制成功");
        console.log("复制成功");
        e.clearSelection();
      });
      clipboard.on("error", function(e) {
        this.$message.warning("复制失败,当前浏览器不支持复制！");
        console.log("复制失败");
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  padding: 25px;
  height: auto;
  overflow: auto;
}
.active {
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* border: 1px solid #000 */
}
.cleboth {
  clear: both;
}
.index-header {
  display: flex;
  align-items: center;
}
.index-title {
  color: #778ca2;
  font-size: 14px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.index-home {
  font-size: 12px;
  color: #009fe8;
}
/*我的资源样式*/
.index-resources {
  background: #ffffff;
  padding-top: 30px;
}
.index-resources-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}
.index-resources-list {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.index-resources-center {
  position: relative;
  width: 100px;
}
.index-resources-list-title {
  font-size: 28px;
  color: #333333;
  text-align: center;
}
.index-resources-list-name {
  font-size: 12px;
  color: #778ca2;
  text-align: center;
  padding-top: 10px;
}
.index-resources-list-pt {
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: -15px;
  right: -10px;
  background: #f55a40;
  padding: 2px 14px;
  border-radius: 9px;
}
/*会员中心样式*/
.index-member {
  background: #ffffff;
  margin-top: 20px;
  padding: 30px 0;
  display: flex;
  align-items: center;
}
.index-member-left {
  font-size: 12px;
  color: #333333;
  padding-left: 30px;
}
.index-member-left > span {
  background: #009fe8;
  border-radius: 12px;
  font-size: 12px;
  color: #ffffff;
  padding: 6px 12px;
  margin-left: 20px;
}
.index-advert {
  background: #ffffff;
  margin-top: 20px;
  /* padding: 30px 0; */
  /* display: flex;
  align-items: center; */
}
/*发布中的房源样式*/
.index-release {
  background: #ffffff;
  margin-top: 20px;
  padding-top: 30px;
}
/*楼书浏览量样式*/
.index-brochure {
  background: #ffffff;
  margin-top: 20px;
  padding-top: 30px;
}
.index-brochure-cont {
  padding: 30px 40px;
}
.index-brochure-tab {
  border: 1px solid #ebeef5;
  border-bottom: none;
}
/*我的足迹*/
.index-footprint {
  background: #ffffff;
  margin-top: 20px;
  padding-top: 30px;
}
/*向您推荐*/
.index-recommend {
  background: #ffffff;
  margin-top: 20px;
  padding-top: 30px;
}
/*公共样式*/
.index-center {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 20px 10px 0 40px;
}
.index-list {
  width: 252px;
  border-radius: 10px;
  background: #ffffff;
  margin-right: 20px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.index-list:nth-child(5n + 5) {
  margin-right: 0;
}
.index-list-img > img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 170px;
}
.index-list-center {
  padding: 15px 15px;
}
.index-list-title {
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333333;
  font-size: 12px;
}
.index-list-title span {
  float: left;
}
.index-list-item {
  display: flex;
  align-items: center;
  padding-top: 10px;
  justify-content: space-between;
}
.index-list-browse {
  color: #778ca2;
  font-size: 11px;
}
.index-list-money {
  color: #666666;
  font-size: 12px;
  margin-right: 8px;
}
.index-list-money > span {
  color: #39b4ff;
  font-size: 16px;
}
.index-list-upper {
  color: #666666;
  font-size: 12px;
}
.index-list-time {
  color: #778ca2;
  font-size: 12px;
}
.index-list-address {
  color: #666666;
  font-size: 12px;
}
.index-list-distance {
  background: #f3f3f3;
  border-radius: 2px;
  font-size: 12px;
  color: #9799a7;
  padding: 2px 5px;
}
.brochure-title {
  /* background: #ccc; */
  position: relative;
  top: -40px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}
.brochure-content {
  background: #fff;
}
.brochure-content label {
  margin-left: 10%;
  display: inline-block;
  width: 60px;
}
.brochure-content span {
  color: #39b4ff;
  cursor: pointer;
}
.brochure-content input {
  min-width: 40%;
  height: 28px;
  background: #fff;
  border: 0.5px solid #eee;
  border-radius: 3px;
  text-indent: 10px;
  color: #666;
}

/*.follow-floor-bt-name{color: #009FE8; font-size: 12px;}*/
/*.follow-floor-bt-img{width: 20px; height: 20px;}*/
</style>

